import React from "react";
import style from "../css/TSCmy.module.css";
import {
  SetOutline,
  TextOutline,
  CheckCircleFill,
  CheckShieldFill,
} from "antd-mobile-icons";
import { getLogin } from "../api/index";
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { useEffect } from "react";
export default function My() {
  const [flag, setFlag] = useState(true);
  // 查看全部
  const navigate = useNavigate();
  const goall = () => {
    navigate("/my/allorders");
  };
  //我卖的 查看全部
  const goall1 = () => {
    navigate("/my/allorders1");
  };
  //个人主页
  const personalHomepage = () => {
    navigate("/my/personal");
  };
  const fansClub = () => {
    let arr = JSON.parse(user.fans)
    navigate("/my/personal/fansclub", { state: { data:arr , id: user.id } });
  };

  const attention = () => {
    let arr = JSON.parse(user.attention)
    navigate("/my/personal/attention",{ state: { data:arr , id: user.id } });
  };
  const settingFn = () => {
    navigate("/my/setting");
  };
  // 用户数据
  const [user, setUser] = useState({});
  useEffect(() => {
    let userlist = JSON.parse(localStorage.getItem("user"));
    // 请求当前用户数据
    let obj = {};
    getLogin().then((res) => {
      obj = res.data.find((i) => i.id == userlist.id);
      setUser(obj);
    });
  }, []);
  return (
    <>
      <img className={style.bjimg} src={user.userImg} alt="" />
      <div className={style.mytop}>
        <div>我的</div>
        <SetOutline className={style.mysz} onClick={settingFn} />
      </div>
      {/* 头像box */}
      <div className={style.mybox}>
        {/* 头像 */}
        <div className={style.headportrait}>
          <img className={style.headimg} src={user.userImg} alt="" />
        </div>
        {/* 名字 */}
        <div className={style.mynamebox}>
          <div className={style.myname}>{user.name}</div>
          <div className={style.mytxt}>{user.text}</div>
        </div>
        {/* 粉丝 */}
        <ul className={style.myfensi}>
          <li onClick={attention}>
            <div>{user.attentionN}</div>
            <span>关注</span>
          </li>
          <li onClick={fansClub}>
            <div>{user.fansN}</div>
            <span>粉丝</span>
          </li>
          <li>
            <div>{user.praiseN}</div>
            <span>点赞</span>
          </li>
        </ul>
        {/* 个人主页 */}
        <button
          className={style.mygerenzhuye}
          color="primary"
          fill="outline"
          onClick={personalHomepage}
        >
          个人主页{">"}
        </button>
      </div>
      <div className={style.myhuakuai}>
        <div className={style.tit}>
          <div
            onClick={() => {
              setFlag(false);
            }}
            className={style.myhktit}
            style={{ color: !flag ? "#30D4D3" : "#000" }}
          >
            我卖的
          </div>
          <div
            onClick={() => {
              setFlag(true);
            }}
            className={style.myhktit}
            style={{ color: flag ? "#30D4D3" : "#000" }}
          >
            我买的
          </div>
        </div>
        {/* 选项卡内容 */}
        {flag ? (
          <div>
            <div className={style.contxt}>
              <div>购买订单</div>
              <div
                style={{ color: "#28D2D1", fontSize: "14px" }}
                onClick={goall}
              >
                查看全部{">"}
              </div>
            </div>
            <ul className={style.ddlist}>
              <li>
                <div>
                  <TextOutline style={{ fontSize: 30 }} />
                </div>
                <span>订单签收</span>
              </li>
              <li>
                <div>
                  <CheckCircleFill style={{ fontSize: 30 }} />
                </div>
                <span>已签收</span>
              </li>
              <li>
                <div>
                  <CheckShieldFill style={{ fontSize: 30 }} />
                </div>
                <span>申请售后</span>
              </li>
            </ul>
          </div>
        ) : (
          <div>
            <div className={style.contxt}>
              <div>购买订单</div>
              <div
                style={{ color: "#28D2D1", fontSize: "14px" }}
                onClick={goall1}
              >
                查看全部{">"}
              </div>
            </div>
          </div>
        )}
      </div>
    </>
  );
}
